import * as React from 'react'
import { connect } from 'react-redux' // 引入合并redux组件
import { addTodo } from '../reduxConfig/actions' // 引入action动作文件

// const AddTodo = ({ dispatch }) => {
//   let input
//   return (
//     <div>
//       <form onSubmit={e => {
//         e.preventDefault()
//         if (!input.value.trim()) {
//           return
//         }
//         dispatch(addTodo(input.value))
//         input.value = ''
//       }}>
//         <input ref={node => input = node} />
//         <button type="submit">
//           Add Todo
//         </button>
//       </form>
//     </div>
//   )
// }
/**定义组件props */
export interface Props {
  onSubmitAdd2: Function
}
class AddTodo extends React.Component<Props, object> {
  input
  constructor(props) {
    super(props);
  }
  render() {// 这是组件渲染的内容
    return (
      <div>
        <form onSubmit={this.onSubmitAdd.bind(this)}>
          <input ref={node => this.input = node} />
          <button type="submit">Add Todo</button>
        </form>
      </div>
    );
  }
  onSubmitAdd(e){
    e.preventDefault()
    if (!this.input.value.trim()) {
      return
    }
    this.props.onSubmitAdd2(this.input.value) // 把用户当前输入的值传入
    this.input.value = '' // 添加后清空输入框
  }
}

// 这是核心干活的函数
// 把所有的actions的dispatch灌进去,第二个参数是用户传入组件的值
const mapDispatchToProps = (dispatch) => {
  // ownProps是使用此组件传入的参数(actions名称)
  // 每个点击事件你也可以理解成action用户的动作
  return ({
    // 添加处理函数事件(自定义函数),这个到时候会绑定到组件按钮上使用
    onSubmitAdd2: (data:String):Object => dispatch(addTodo(data))
    // 接收外部传入的参数,把参数又派发到actions里面去
  })
}


export default connect(null, mapDispatchToProps)(AddTodo)
